<template>
	<view class="box-">
		<view class="tab-box">
			<u-subsection :list="list" :current="current" activeColor="#066EC9" mode="subsection"
				@change="sectionChange"></u-subsection>
		</view>
		<view class="content">
			<view class="header">
				<view class="">
					共有<span>0</span>个生词，前<span>0</span>个需要立即复习。
				</view>
				<view class="btn">
					<span>智能复习</span>
					<image src="@/static/images/review/you.png" />
				</view>
			</view>
			<!-- 播放机 -->
			<view class="vedio">
				<view class="bofangji-bj">
					<image src="@/static/images/review/bofangji.png" />
				</view>
				<span>播放机</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ['单词', '例句'],
				current: 0
			}
		},
		methods: {
			sectionChange(index) {
				this.current = index;
			}
		}
	}
</script>

<style scoped lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.box- {
		height: 100%;
		width: 100%;
	}

	.tab-box {
		width: px_2_vw(430);
		margin: 37rpx auto;
	}

	.content {
		background: #DFE3E6;
		width: 100%;
		height: calc(100% - 66px);
		padding: 41rpx 0;
		position: relative;
		.header {
			font-size: px_2_vw(20);
			color: #5C5C5C;
			display: flex;
			align-items: center;
			padding-left: 190rpx;

			span {
				color: #D43030;
			}

			.btn {
				width: px_2_vw(121);
				height: px_2_vw(36);
				border: 2rpx solid #FF5F0F;
				color: #FF5F0F;
				font-size: px_2_vw(20);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 63rpx;
				background: rgba(250, 239, 140, 0.67);
			}

			image {
				width: px_2_vw(15);
				height: px_2_vw(15);
				margin-left: 8rpx;
			}
		}
		.vedio {
			position: absolute;
			right: 51rpx;
			width: px_2_vw(148);
			height: px_2_vw(64);
			background-color: #F0BA0A;
			color: #7D0101;
			font-size: px_2_vw(24);
			border-radius: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.bofangji-bj {
				width: px_2_vw(52);
				height: px_2_vw(52);
				border-radius: 50%;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 8rpx;
			}
			image {
				width: px_2_vw(36);
				height: px_2_vw(36);
				
			}
		}
	}
</style>